<template>
  <el-card class="control" :style="styleSet">
    <div v-if="control">
      <div class="title" :style="{textAlign:control.isCenter ? 'center': 'left'}">
        {{ title }}
        <icon v-if="control.icon" class="icon" :icon="control.icon" />
      </div>
      <div class="census">
        <span :style="{ color: control.color,fontSize: control.fontSize+'em' }">{{ control.value }}</span>
      </div>
    </div>
  </el-card>
</template>

<script>
import { Statistics } from '@/customForm/api/pageCalculate'
export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: null
    },
    width: {
      type: Number,
      default: null
    },
    height: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    title: {
      type: String,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    },
    query: {
      type: Object,
      default: null
    },
    extend: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      styleSet: {
        width: '100px',
        height: '70px'
      },
      source: null,
      valueStyle: null,
      control: null
    }
  },
  computed: {},
  watch: {
    width: {
      handler(val) {
        if (val && this.height && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    height: {
      handler(val) {
        if (val && this.width && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    contentWidth: {
      handler(val) {
        if (val && this.height && this.width) {
          this.init()
        }
      },
      immediate: true
    },
    item: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.control = null
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    init() {
      let width = 0
      if (this.width === 23) {
        width = Math.round(this.contentWidth * 2 / 3) - 12
      } else {
        width = Math.round(this.contentWidth / this.width) - 12
      }
      this.styleSet = {
        width: width + 'px',
        height: (14 * this.height) + 'px'
      }
    },
    reset() {
      const t = {
        icon: this.item.Icon,
        value: null,
        fontSize: this.item.FontSize,
        color: this.item.Color,
        isCenter: this.item.IsCenter
      }
      this.valueStyle = this.item.ValueStyle
      this.control = t
      if (this.item.IsConfig) {
        this.initQuery()
        this.calculate()
      }
    },
    initQuery() {
      this.$watch(
        () => {
          return this.query[this.id].ver
        },
        (newVal, oldVal) => {
          if (newVal !== oldVal) {
            this.calculate()
          }
        },
        { immediate: false }
      )
    },
    async calculate() {
      const res = await Statistics({
        Id: this.id,
        Search: this.query[this.id]?.param.filter(c => c.Val != null || c.Vals != null),
        Extend: this.extend
      })
      this.source = Number(res)
      this.control.value = this.format(this.source)
    },
    format(num) {
      if (this.valueStyle == null) {
        return num
      }
      const style = this.valueStyle
      if (style.PageNumMag === 0) {
        num = num / 1000
        style.Unit = '千'
      } else if (style.PageNumMag === 1) {
        num = num / 10000
        style.Unit = '万'
      } else if (style.PageNumMag === 2) {
        num = num / 1000000
        style.Unit = '百万'
      } else if (style.PageNumMag === 3) {
        num = num / 10000000
        style.Unit = '千万'
      } else if (style.PageNumMag === 4) {
        num = num / 100000000
        style.Unit = '亿'
      }
      if (style.Precision != null) {
        num = this.round(num, style.Precision)
      }
      if (style.ThouSep === true) {
        num = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      }
      if (style.Unit == null) {
        return num
      }
      return num + style.Unit
    },
    round(num, precision) {
      let p = 1
      for (let i = 0; i < precision; i++) {
        p = p * 10
      }
      return Math.round(num * p) / p
    }
  }
}
</script>
<style scoped>

.control .census {
  width: 100%;
  text-align: center;
  padding: 8px;
}

.control .title .icon {
  float: right;
}

.control .title {
  line-height: 25px;
  font-weight: 400;
  padding: 5px;
  font-size: 1.1rem;
  letter-spacing: 1px;
  /* border-left: 3px solid #409eff; */
}
</style>
